<template>
	<view class="container">
		<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }"
			@down="downCallback" :up="upOption" @up="upCallback">
 
	<view class="banner-swiper-wrap mb5">
		<!-- 标题栏 -->
		<view class="u-navbar u-navbar-fixed" :style="[navbarStyle]">
			<view class="nav-bg" :style="[navBg]"></view>
			<view class="u-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="u-navbar-inner" :style="[navbarInnerStyle]">
				<view class="u-back-wrap">
					<image src="../../static/logo.png" mode=""></image>
				</view>
				<view class="search-box u-flex u-row-center u-col-center u-m-r-30">
					<view class="search-content" @click="onSearch">
						<view class="search">
							<u-icon name="search" size="34" :style="[navTitleColor]" style="margin: 0 15rpx;">
							</u-icon>
							<input class="sm-mn" placeholder-style='color:#999' type="text" confirm-type='search'
								@input="onInput" v-model="searchVal" placeholder="请输入" :style="[navTitleColor]">
							<image v-show="searchVal" @tap="clearSearch" class="close" <!--
								src="../../static/images/close.png" mode=""> -->
							</image>
						</view>
					</view>
					<view class="u-iconfont uicon-search" :style="[navTitleColor]"></view>
				</view>
			</view>
		</view>
		<!-- 轮播组件 -->
		<swiper class="screen-swiper square-dot" @change="onChange" style="height: 520rpx" :indicator-dots="true"
			:circular="true" :autoplay="true" interval="5000" duration="500">
			<swiper-item v-for="(item, index) in swiperList" :key="index" @tap="bannerss(item.link)">
				<image :src="item.url" mode="aspectFill"></image>
			</swiper-item>
		</swiper>


	</view>
	<div class="nav">
		<u-grid :border="false" col="5">
			<u-grid-item @click="navClick()" v-for="(item,index) in navList" :key="index">
				<image :src="item.icon" mode=""></image>
				<text class="grid-text">{{item.name}}</text>
			</u-grid-item>
		</u-grid>
	</div>
	<!-- 商品列表 -->
	<view class="goods-list clearfix" :class="['column-' + (showView ? '1' : '2')]">
		<view class="goods-item" v-for="(item, index) in list.data" :key="index" @click="onTargetDetail(item)">

			<!-- 多列显示 -->
			<view class="">
				<GoodItem :good="item"></GoodItem>
			</view>
		</view>
	</view>
	</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
	import {
		productSearch
	} from '@/api/goods.js'
	import {
		getMoreListData
	} from '@/core/app.js'
	import Search from '@/components/search'
	import GoodItem from '@/components/goodItem/index';

	import {
		categoryPage,
		mallProductCategory
	} from '@/api/home.js';
	// 获取系统状态栏的高度
	let systemInfo = uni.getSystemInfoSync();
	let menuButtonInfo = {};
	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
	menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	// #endif 
	export default {
		components: {
			Search,
			GoodItem
		},
		computed: {
			// 导航栏内部盒子的样式
			navbarInnerStyle() {
				let style = {};
				style.height = this.navbarHeight + 'px';
				// #ifdef MP
				let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
				style.marginRight = rightButtonWidth + 'px';
				// #endif
				return style;
			},
			// 整个导航栏的样式
			navbarStyle() {
				let style = {};
				style.zIndex = this.$u.zIndex.navbar;
				style.background = 'none';
				Object.assign(style, this.background);
				return style;
			},
			navbarHeight() {
				// #ifdef APP-PLUS || H5
				return 44;
				// #endif
				// #ifdef MP
				return systemInfo.platform == 'ios' ? 44 : 48;
				// #endif
			}
		},
		mixins: [MescrollMixin],
		data() {
			return {
				searchVal:'',
				statusBarHeight: systemInfo.statusBarHeight,
				navBg: {
					opacity: 0
				},
				navTitleColor: {
					color: '#fff'
				},
				swiperList: [{
					url: 'https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000366/100013552797/FocusFullshop/CkJqZnMvdDEvMjQwODc1LzI1Lzk2NjYvNDYzODMvNjY0YTUwNmRGNTNiMWE5ZjQvYmNlYjUxODFhMmY3NWNmZC5wbmcSCTItdHlfMF81MzACOO6LekIgChzmvKvmraXogIXok53niZkv5peg57q_6ICz5py6EAFCEwoP54mp576O5Lu35pu05LyYEAJCEAoM56uL5Y2z5oqi6LStEAZCCgoG6LaF5YC8EAdYnemWyvQC/cr/s/q.jpg'
				}],
				showView: false, // 列表显示方式 (true列表、false平铺) 
				options: {}, // 当前页面参数
				navList: [],
				list: {
					data: [], // 列表数据
					current_page: 1, // 当前页码
					last_page: 1, // 最大页码
					per_page: 15, // 每页记录数
					total: 0, // 总记录数
				}, // 商品列表数据

				// 上拉加载配置
				upOption: {
					// 首次自动执行
					auto: true,
					// 每页数据的数量; 默认10
					page: {
						size: 15
					},
					// 数量要大于4条才显示无更多数据
					noMoreSize: 4,
				}
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			// 记录options
			this.options = options
			this.getCategoryPage()
		},

		methods: {
// 获取导航栏
			async getCategoryPage() {
				const res = await mallProductCategory({
					size: 8,
					current: 1,
					parentId:0,
					level:1,
				})
				this.navList = res.records
			},
			async upCallback(page) { 

				const param = {
					name: this.options.search || '',
					current: page.num,
					size: 15
				}
				const res = await productSearch(param) 
				const newList = res.records
				this.list.data = getMoreListData(newList, this.list, page.num)
				const curPageLen = newList.length
				const totalSize = newList.total
				this.mescroll.endBySize(curPageLen, totalSize)
			},


			// 跳转商品详情页
			onTargetDetail(item) {
				uni.navigateTo({
					url: `/pages/goods/detail?productId=${item.productId}&name=${item.name}`
				}) 
			},

			/**
			 * 商品搜索
			 */
			onSearch() {
				uni.navigateBack()
			},
			navClick () {
				uni.switchTab({
					url:'/pages/cate/index'
				})
			}

		},

	}
</script>

<style lang="scss" scoped>
	// 页面头部
	.header {
		display: flex;
		align-items: center;
		background-color: #fff;

		// 搜索框
		.search {
			flex: 1;
		}


	}

	// 导航栏
	.nav {
		padding: 20rpx;

		.u-grid {
			background-color: #fff;
			border-radius: 15rpx;
			padding: 20rpx;
		}

		image {
			width: 90rpx;
			border-radius: 50%;
			height: 90rpx;
		}

		.grid-text {
			margin-top: 20rpx;
			font-size: 28rpx;
		}
	}

	// 商品列表
	.goods-list {
		padding: 4rpx;
		box-sizing: border-box;
	}


	// 平铺显示
	.goods-list.column-2 {
		.goods-item {
			width: 50%;
		}
	}

	.goods-item {
		float: left;
		box-sizing: border-box;
		padding: 6rpx;

	}
	
	
	.banner-swiper-wrap {
		height: 520rpx;
		position: relative;
		z-index: 100;
	
		.search-box {
			width: 60%;
			height: 60rpx;
			background: rgba(#000, 0.18);
			border-radius: 100rpx;
		}
	
		.hover-search {
			background: rgba(#fff, 0.18);
		}
	}
	
	.u-navbar {
		width: 100%;
	}
	
	.u-navbar-fixed {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 991;
	
		.nav-bg {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 980;
			width: 100%;
			height: 100%;
			background-color: #fff;
			box-shadow: 0px 4px 6px rgba(140, 140, 140, 0.32);
		}
	}
	
	.u-status-bar {
		width: 100%;
	}
	
	.u-navbar-inner {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: relative;
		align-items: center;
		position: relative;
		z-index: 990;
	}
	
	.u-back-wrap {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex: 1;
		flex-grow: 0;
		padding: 14rpx 14rpx 14rpx 24rpx;
	
		image {
			width: 138rpx;
			height: 71rpx;
		}
	} 
	
	
	.search-content {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.search {
		width: 100%;
		height: 60rpx;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
	}
	
	.search input {
		width: 60%;
	}
	
	.search image {
		width: 40rpx;
		height: 40rpx;
		margin: 0 15rpx;
	}
	
	.close {
		width: 30rpx;
		height: 30rpx;
	}
	
	.sou {
		background: #EB702D;
		padding: 8rpx 10rpx;
		color: #FFFFFF;
		border-radius: 10rpx;
	}
	
	// 轮播图
	.screen-swiper {
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	
</style>